<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Submit Page</title>

<link href="css/style.css" type="text/css" rel="stylesheet" media="all" />

<!-- TextboxList is not priceless for commercial use. See <http://devthought.com/projects/mootools/textboxlist/> -->
		
		<!-- required stylesheet for TextboxList -->
		<link rel="stylesheet" href="js//TextboxList.css" type="text/css" media="screen" charset="utf-8" />
		<!-- required stylesheet for TextboxList.Autocomplete -->
		<link rel="stylesheet" href="js//TextboxList.Autocomplete.css" type="text/css" media="screen" charset="utf-8" />
		
		<script src="js/mootools-1.2.1-core-yc.js" type="text/javascript" charset="utf-8"></script>		

		<!-- required for TextboxList -->
		<script src="js/GrowingInput.js" type="text/javascript" charset="utf-8"></script>
				
		<script src="js/TextboxList.js" type="text/javascript" charset="utf-8"></script>		
		<script src="js/TextboxList.Autocomplete.js" type="text/javascript" charset="utf-8"></script>
		<!-- required for TextboxList.Autocomplete if method set to 'binary' -->
		<script src="js/TextboxList.Autocomplete.Binary.js" type="text/javascript" charset="utf-8"></script>		
		
		<!-- sample initialization -->
		<script type="text/javascript" charset="utf-8">		
			window.addEvent('load', function(){
				// Standard initialization
				var t = new TextboxList('form_tags_input', {  });
				t.add('Football').add('Sport').add('Tag 3');
				
				
				// With custom adding keys 
				var t2 = new TextboxList('form_tags_input_2', {bitsOptions:{editable:{addKeys: 188}}});
				t2.add('Football').add('Sport');
				
				// With custom adding keys 
				var t2 = new TextboxList('form_tags_input_3', {bitsOptions:{editable:{addKeys: 188}}});
				t2.add('Sorel Mihai').add('Lee');
	
				
			});
		</script>
		
		<!-- sample style -->
		<style type="text/css" media="screen">
			.form_tags { margin-bottom: 10px; }
			
			/* Setting widget width example */
			.textboxlist { width: 400px; }
			
			/* Preloader for autocomplete */
			.textboxlist-loading { background: url('images/spinner.gif') no-repeat 380px center; }
			
			/* Autocomplete results styling */
			.form_friends .textboxlist-autocomplete-result { overflow: hidden; zoom: 1; }
			.form_friends .textboxlist-autocomplete-result img { float: left; padding-right: 10px; }
			
			.note { color: #666; font-size: 90%; }
			#footer { margin: 50px; text-align: center; }
		</style>


</head>

<body>

<div id="header-wrapper">
	<div id="header">
    	<div class="header-logo">
        	<h1>Question Mark</h1>
        </div>
        <div class="header-title">
        	<h3>An question/answers system powered<br /> 100% by WordPress.</h3>
        </div>
        
        <div class="userpanel">
        	<div class="user-img">
        		<img src="images/user-img.jpg" />
            </div>
            <div class="user-title">
        		<h5>Lieutenant Columbo</h5>
                <br /><br />
            	<a href="#">Profile</a> <font style="float:right; color:#5f83a1;">|</font> <a href="#">Log Out</a>
            </div>
        </div>
        
        <div style="clear:both;"></div>
    </div>
    <div class="menu-wrapper">
    	<div class="menu">
        	<p class="topics-title">TRENDING TOPICS:</p>
        	<div class="topics">
            	<ul>
                	<li><a href="#">Football</a></li>
                    <li><a href="#">Music</a></li>
                    <li><a href="#">Food</a></li>
                    <li><a href="#">Internet</a></li>
                </ul>
            </div>
            <div class="all">
            	<ul>
                	<li><a href="#">See all &raquo;</a></li>
                </ul>
            </div>
            <div class="menu-right">
            	<ul>
                	<li><a href="#">About Us</a></li>
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">Friends</a></li>
                    <li><a href="#">Other Pages</a></li>
                </ul>
            </div>
    	</div>
    </div>
</div>

<div id="content">
	<div class="left">
		<h2>Ask a question</h2>
        
        <div class="info">
        	<p>Try to be as detailed as possible in formuling your question and describing it. <br />Choosing tags carefully will also help you in getting the right answers as soon as posible.</p>
        </div>
        
        <div class="question-form">
        	<form action="#" method="post">
            <p>Your Question:</p>
  			<div class="text-publish">
				<TEXTAREA NAME="comments" COLS=75 ROWS=3></TEXTAREA>
        	</div>
            <p>Describe your question:</p>
   			<div class="text-publish">
				<TEXTAREA NAME="comments" COLS=75 ROWS=6></TEXTAREA>
        	</div>
            
            
		
		<div style="display:none;" class="form_tags"><input type="text" name="test" value="" id="form_tags_input" /></div>
		
		<p>Tags: <font class="comma">Separated by comma</font></p>
		<div class="form_tags"><input type="text" name="test2" value="" id="form_tags_input_2" /></div>
        <div class="height"></div>
        <p>Invite Users: <font class="comma">Separated by comma</font></p>
		<div class="form_tags"><input type="text" name="test2" value="" id="form_tags_input_3" /></div>
		
        <div class="submit">
		<div class="publish-submit">
			<input type="image" src="images/publish-submit.jpg" name="submitform" />
        </div>
        <div class="terms">
        	<p>By submiting this question you agree with our <a href="#">Terms of Service</a>.</p>
        </div>
        </div>
				
		
			</form>
        </div>
    </div>  
    <div class="right">
    	<div class="ask">
        	<p>Do you have any <br /><font class="tech">technology questions</font> ?</p>
            <a href="#">Ask a question</a>
        </div>
        
        <div class="login">
        	<p><font class="login-title">Login</font></p>
        	<form method="POST" action="#">
            <p>Username:</p>
  			<input class="input" type="text" name="username" size="15" /><br />
            <p>Password:</p>
   			<input class="input" type="password" name="passwort" size="15" /><br />
  			<div align="center">
    		<a href="#">Forgot your password ?</a><input type="image" src="images/login-btn.jpg" type="submit" value="Login" />
  			</div>
			</form>
        </div>
        
        <div class="ads">
        	<div class="ad-left">
            	<img src="images/ad.jpg" />
            </div>
            <div class="ad-right">
            	<img src="images/ad1.jpg" />
            </div>
            <div class="ad-left">
            	<img src="images/ad2.jpg" />
            </div>
            <div class="ad-right">
            	<img src="images/ad3.jpg" />
            </div>
            <div class="ad-left">
            	<img src="images/ad4.jpg" />
            </div>
            <div class="ad-right">
            	<img src="images/ad5.jpg" />
            </div>
            <div style="clear:both;"></div>
        </div>
    </div>
    <div style="clear:both;"></div>
</div>

<div id="footer2">
	<img id="left" src="images/footer-left.jpg" />
    <h6>Copyright &copy; 2010. All rights reserved.</h6>
    	<div class="privacy">
        	<a font style="text-decoration:underline" href="#">Privacy Policy</a> | <a font style="text-decoration:underline" href="#">Terms of Use</a>
        </div>
    <img id="right" src="images/footer-right.jpg" />
</div>

</body>
</html>
